<template>
  <el-dialog
    :visible="show"
    @update:visible="updateVisiable($event)"
    :title="title"
    width="890px"
    :show-close="true"
    @open="$emit('open')"
    @opened="onOpened"
    @close="closeCategory"
    @closed="$emit('closed')"
  >
    <el-table
      ref="multipleTable"
      :data="tableData.records"
      tooltip-effect="dark"
      style="width: 100%;max-height: 400px;overflow:auto"
    >
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="55"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="名称"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="displayName"
        label="显示名称"
      ></el-table-column>
      <el-table-column label="选择" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-check"
            @click="selectCategory(scope.row)"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <pagination
        v-show="tableData.total > 0"
        :total="tableData.total"
        :page.sync="tableData.current"
        :limit.sync="tableData.size"
        :page-sizes="[5]"
        @pagination="search"
      />
    </div>
    <el-row :gutter="20" style="text-align: right;padding: 6px">
      <el-col :span="24">
        <el-button
          @click="clearCategory"
          type="primary"
          size="small"
          icon="el-icon-refresh"
          >清空</el-button
        >
        <el-button
          @click="closeCategory"
          type="primary"
          size="small"
          icon="el-icon-close"
          >取消</el-button
        >
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import Pagination from "@/components/Pagination/index.vue";
import { ApiError } from "@/utils/errors";
import { pageCategory } from "@/api/commerce/category";
export default {
  components: { Pagination },
  props: {
    // 是否显示, 支持 .sync
    show: {
      type: Boolean,
      required: true
    },
    // 打开立刻搜索
    searchOnShow: {
      type: Boolean,
      default: true
    },
    categoryId: {
      type: Number,
      default: null
    },
    // 标题
    title: {
      type: String,
      default: "选择商品分类"
    }
  },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
        current: 1,
        size: 5
      }
    };
  },
  created() {
    this.search();
  },
  methods: {
    updateVisiable(v) {
      this.$emit("update:show", v);
    },
    onOpened() {
      this.$emit("opened");
      if (this.searchOnShow) {
        this.search();
      }
    },
    search() {
      const params = {
        status: 2,
        current: this.tableData.current,
        size: this.tableData.size
      };
      pageCategory(params).then(res => {
        if (res.status == 200) {
          if (res.data.errors) {
            return this.$message.error(ApiError.msg(res.data.errors));
          }
          let data = res.data.data;
          this.tableData.records = data.records;
          this.tableData.total = data.total;
          this.tableData.current = data.current;
          this.tableData.size = data.size;
        }
      });
    },
    selectCategory(row) {
      this.$emit("selectCategory", { data: row });
    },
    clearCategory(){
      this.$emit("clearCategory");
    },
    closeCategory() {
      this.$emit("closeCategory");
    }
  }
};
</script>
